import React from "react";
import {
  Row,
  Col,
  Card,
  Statistic,
  Progress,
  List,
  Avatar,
  Tag,
  Button,
} from "antd";
import { ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons";
import "./index.less";

const Workbench: React.FC = () => {
  const projectList = [
    {
      title: "项目名称1",
      desc: "项目描述信息",
      avatar: "P1",
      status: "进行中",
      progress: 80,
    },
    {
      title: "项目名称2",
      desc: "项目描述信息",
      avatar: "P2",
      status: "已完成",
      progress: 100,
    },
    // 更多项目...
  ];

  const activityList = [
    {
      user: "张三",
      action: "完成了任务",
      target: "项目名称1",
      time: "2024-03-21 12:00:00",
    },
    {
      user: "李四",
      action: "创建了项目",
      target: "项目名称2",
      time: "2024-03-21 11:30:00",
    },
    // 更多活动...
  ];

  return (
    <div className="pro-workbench" data-oid="f_6led.">
      <Row gutter={[24, 24]} data-oid="q..2gj:">
        <Col span={6} data-oid="yp95s9z">
          <Card data-oid="kplfz-a">
            <Statistic
              title="总销售额"
              value={112893}
              precision={2}
              valueStyle={{ color: "#3f8600" }}
              prefix="¥"
              suffix={<ArrowUpOutlined data-oid="1qttzc2" />}
              data-oid="9if5cw-"
            />

            <div className="pro-statistic-footer" data-oid=".ujkkwd">
              <span data-oid="ali-rta">周同比 12%</span>
              <span data-oid="55v-sw8">日同比 11%</span>
            </div>
          </Card>
        </Col>
        <Col span={6} data-oid="_s2wco3">
          <Card data-oid="l6pml93">
            <Statistic
              title="访问量"
              value={8846}
              valueStyle={{ color: "#cf1322" }}
              suffix={<ArrowDownOutlined data-oid="68ysoje" />}
              data-oid="dawjucw"
            />

            <div className="pro-statistic-footer" data-oid="2-_u75g">
              <span data-oid="-ybl6ek">周同比 12%</span>
              <span data-oid="mq.m6vq">日同比 11%</span>
            </div>
          </Card>
        </Col>
        <Col span={6} data-oid="mbwqf.q">
          <Card data-oid="ft380ay">
            <Statistic
              title="订单量"
              value={1234}
              valueStyle={{ color: "#3f8600" }}
              suffix={<ArrowUpOutlined data-oid="ggia:rw" />}
              data-oid="n0i9kn0"
            />

            <div className="pro-statistic-footer" data-oid="984i20p">
              <span data-oid="k4fhapg">周同比 12%</span>
              <span data-oid="95tqcbo">日同比 11%</span>
            </div>
          </Card>
        </Col>
        <Col span={6} data-oid="o_8m4qm">
          <Card data-oid="q7u6w.4">
            <Statistic
              title="新增用户"
              value={567}
              valueStyle={{ color: "#3f8600" }}
              suffix={<ArrowUpOutlined data-oid="i-7r666" />}
              data-oid="wkugr:n"
            />

            <div className="pro-statistic-footer" data-oid="7il-f-i">
              <span data-oid="w:8am8m">周同比 12%</span>
              <span data-oid="5u5ph7l">日同比 11%</span>
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: 24 }} data-oid="x:oo__i">
        <Col span={16} data-oid="alut82:">
          <Card title="进行中的项目" className="pro-card" data-oid="f3_3mlj">
            <List
              itemLayout="horizontal"
              dataSource={projectList}
              renderItem={(item) => (
                <List.Item data-oid="3czoxj_">
                  <List.Item.Meta
                    avatar={<Avatar data-oid="2ldvqgv">{item.avatar}</Avatar>}
                    title={item.title}
                    description={item.desc}
                    data-oid="0g02nh."
                  />

                  <div className="pro-project-status" data-oid="uq7xm2t">
                    <Tag
                      color={item.status === "进行中" ? "blue" : "green"}
                      data-oid="y3twdx9"
                    >
                      {item.status}
                    </Tag>
                    <Progress
                      percent={item.progress}
                      size="small"
                      data-oid="1v29sn8"
                    />
                  </div>
                </List.Item>
              )}
              data-oid="m-hivfn"
            />
          </Card>
        </Col>
        <Col span={8} data-oid=":-.bvk2">
          <Card title="动态" className="pro-card" data-oid="h5ver3l">
            <List
              itemLayout="horizontal"
              dataSource={activityList}
              renderItem={(item) => (
                <List.Item data-oid="xkk0-s_">
                  <List.Item.Meta
                    title={
                      <span data-oid="7svr3so">
                        <Button
                          type="link"
                          onClick={() => {}}
                          data-oid="2m7b6xf"
                        >
                          {item.user}
                        </Button>{" "}
                        {item.action}{" "}
                        <Button
                          type="link"
                          onClick={() => {}}
                          data-oid="z1dd3hx"
                        >
                          {item.target}
                        </Button>
                      </span>
                    }
                    description={item.time}
                    data-oid="r8.qyat"
                  />
                </List.Item>
              )}
              data-oid="ewpl7_a"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Workbench;
